<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  </head>
  
  <body>
    <div class="grandparent">
        <div class="parent">
            <div class="child">
                <span class="subchild">
                    <input type="text" class="subchild" value="文本框">
                </span>
            </div>
        </div>
        <span class="subchild">
                    <input type="text" class="subchild" value="文本框">
        </span>
        <div class="surrogateParent"></div>
        <div class="surrogateParent"></div>
    </div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            //区别是 一个是在span里面找subchild一个是在span的子元素里面找
            console.log($("span.subchild").text());
            console.log($("span .subchild").val());
            //parent返回document的对象，而parents返回一个空集合
            console.log($("html").parent().length);
            console.log($("html").parents().length);
            //parent只查找一级父元素，而parents返回所有父级对象，不过都是在一棵树上的父元素
            console.log($("span .subchild").parent("div").length);
            console.log($("span .subchild").parent());
            console.log($("span.subchild").parents().length);
            //向上查找不包含自己父元素中的div
            console.log($("span.subchild").parents("div").length);
            //查找父元素到指定的元素停止
            console.log($("span.subchild").parentsUntil("body").length);
            //closet向上查找符合包括自己选择器的一个div元素
            console.log($("span .subchild").closest("span").attr("class"));
            console.log($("span.subchild").closest("div").attr("class"));
            console.log($("div.child").closest("div").attr("class"));
            //children值查找直接的子节点
            console.log($("div.grandparent").children("div").length);
            //find会查找所有的子元素
            console.log($("div.grandparent").find("div").length);
            
            //查找直接的后继元素，不会往后查找
            console.log($("div.parent").next().length);
            console.log($("div:last").next().length);
            //如果是范围查询:last只会选择最外层的第一个元素返回
            console.log($("div:last").length);
            
            //避免在多个容器之间进行复杂的遍历
            console.log($("div.parent").nextAll().length);
            console.log($("span.subchild").prevAll().length);
            console.log($("div.parent").siblings().length);
        });
    </script>
  </body>
</html>